<template>
  <div id="home">
    <div class="ph_margin"></div>
    <div class="clear"></div>
    <div class="box">
      <div class="featured_news">
        <div class="featured_nav">
          <h2 class="h_title">精选文章</h2>
          <ul id="tab">
            <li class="tab-current"><a>最新文章</a></li>
            <li><a>人气文章</a></li>
            <li><a>猜你喜欢</a></li>
          </ul>
        </div>
        <div class="clear"></div>
        <div id="tab-content">
          <section class="tab-box">
            <div class="f_news_pic">
              <i>
                <local-image :relativePath="articleListLatest[0].cover" />
              </i>
              <div class="f_news_pic_box">
                <p class="f_news_title">
                <a>{{ articleListLatest[0].title }}</a>  
                </p>
                <p class="f_news_info">
                  <span>{{articleListLatest[0].remark}}</span
                  ><span>{{ this.articleListLatest[0].viewCount }}</span>
                </p>
              </div>
            </div>
            <ul class="f_news_list">
              <li v-for="(item, i) in articleListLatest">
                <a href="/">
                  <i>
                    <local-image :relativePath="item.cover" :alt="item.title" />
                  </i>
                  <p>
                    {{ item.title }}
                  </p>
                  <span>{{ item.remark }}</span>
                </a>
              </li>
            </ul>
          </section>

          <section class="tab-box">
            <div class="f_news_pic">
              <i>
                <local-image :relativePath="articleListHottest[0].cover" />
              </i>
              <div class="f_news_pic_box">
                <p class="f_news_title">
                 <a> {{ articleListHottest[0].title }}</a>
                </p>
                <p class="f_news_info">
                  <span>{{articleListHottest[0].remark}}</span
                  ><span>{{ this.articleListHottest[0].viewCount }}</span>
                </p>
              </div>
            </div>
            <ul class="f_news_list">
              <li v-for="(item, i) in articleListHottest">
                <a href="/">
                  <i>
                    <local-image :relativePath="item.cover" :alt="item.title" />
                  </i>
                  <p>
                    {{ item.title }}
                  </p>
                  <span>{{ item.remark }}</span>
                </a>
              </li>
            </ul>
          </section>

          <section class="tab-box">
            <div class="f_news_pic">
              <i>
                <local-image :relativePath="articleListHottest[0].cover" />
              </i>
              <div class="f_news_pic_box">
                <p class="f_news_title">
                 <a> {{ articleListHottest[0].title }}</a>
                </p>
                <p class="f_news_info">
                  <span >{{articleListHottest[0].remark}}</span
                  ><span>{{ this.articleListHottest[0].viewCount }}</span>
                </p>
              </div>
            </div>
            <ul class="f_news_list">
              <li v-for="(item, i) in articleListRandom">
                <a href="/">
                  <i>
                    <local-image :relativePath="item.cover" :alt="item.title" />
                  </i>
                  <p>
                    {{ item.title }}
                  </p>
                  <span>{{ item.remark }}</span>
                </a>
              </li>
            </ul>
          </section>
        </div>
      </div>
      <!--featured_news-->
      <div class="mycard">
        @if (Session["UserNickname"] != null) {
        <section>
          <p class="mycard_title_en">我的</p>
          <p class="mycard_title_en">个人介绍</p>
          <div class="ewm">
            <!-- @*<local-image src="wwwroot/images/wx.png" alt="二维码" />*@ -->
          </div>
          <!-- <i><local-image src="" class="local-image-circle local-image-responsive" alt="头像" /></i> -->
          <ul style="margin-left: 5px">
            <li>
              <span class="text-right">昵称：</span>@Session["UserNickname"]
              <br />
            </li>
            <li>
              <span class="text-right">描述：</span>@Session["UserAbnegation"]
              <br />
            </li>
            <li>
              <span class="text-right">邮箱：</span>
              <a
                href='http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=@Session["UserEmail"]'
                target="_blank"
                >@Session["UserEmail"]</a
              >
            </li>
          </ul>
        </section>
        } else {
        <section>
          <p class="mycard_title_en">my</p>
          <p class="mycard_title_en">profile</p>
          <p class="mycard_title">请先登录后显示</p>
        </section>
        }
      </div>
      <div class="clear"></div>
      <div class="clear"></div>
      <div class="blogs">
        <h2 class="h_title">
          <span class="icon_more">
            <a href="/" target="_blank"> 查看更多 </a> </span
          >文章
        </h2>
        <ul>
          <li class="blogs_list" v-for="(item, i) in articleListRandom">
            <a href="/" target="_blank">
              <i>
                <local-image :relativePath="item.cover" />
              </i>
              <h2>
                {{ item.title }}
              </h2>
            </a>
            <div class="contentP">{{ item.remark }}</div>
            <div class="blogs_base">
              <span
                ><a href="#">作者：{{ item.userName }}</a></span
              ><span class="blogs_time">{{ item.releaseTime }}</span
              ><span class="blogs_onclick">{{ item.viewCount }}</span>
            </div>
            <a
              target="_blank"
              class="read_more btn btn-default btn-sm"
              style="padding-left: 10px"
            >
              继续阅读
            </a>
          </li>
        </ul>
        <div>分页 1 2 3</div>
      </div>
      <aside class="rbox">
        <div class="isgood_news">
          <h2 class="h_title">今日推荐</h2>
          <ul>
            <li v-for="(item, i) in articleList">
              <a href="/" title="" target="_blank">
                <i> <local-image :relativePath="item.cover" /></i>
                <em>{{ i + 1 }}</em>
                <p>{{item.title}}</p>
                <span class="star5"></span>
              </a>
            </li>
          </ul>
        </div>
        <div class="ad_r">
          <a href="/"><image src="wwwroot/images/xg.jpg" alt="广告图" /></a>
        </div>

        <div class="ad_r">
          <a href="/"><image src="wwwroot/images/our.jfif" alt="广告图" /></a>
        </div>
        @*
        <div class="tagsclous">
          <h2 class="h_title">标签云</h2>
          <ul>
            <li><a href="/" target="_blank">程序员</a></li>
            <li><a href="/" target="_blank">互联网</a></li>
            <li><a href="/" target="_blank">自由</a></li>
            <li><a href="/" target="_blank">底气</a></li>
            <li><a href="/" target="_blank">忙碌生活</a></li>
            <li><a href="/" target="_blank">建站流程</a></li>
            <li><a href="/" target="_blank">个人网站</a></li>
            <li><a href="/" target="_blank">建站初衷</a></li>
            <li><a href="/" target="_blank">个人博客</a></li>
          </ul>
        </div>
        *@
        <div class="emial_box">
          <p>您可以通过以下方式联系我们</p>
          <p>（<b>提议</b>、<b>投诉</b>、<b>合作</b>推荐此方式）</p>
          <p>发送邮件Email到</p>
          <p>
            <a
              href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=473237817@qq.com"
              target="_blank"
              >473237817@qq.com</a
            >
          </p>
        </div>
      </aside>
      <a href="#" title="返回顶部" class="icon-top"></a>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { listArticle } from "@/api/home";
import LocalImage from '@/components/LocalImage.vue';

export default {
  name: "Article",
  components: {
    LocalImage
  },
  data() {
    return {
      // 总条数
      total: 0,
      // 文章管理表格数据
      articleList: [],
      //最新文章
      articleListLatest: [],
      //人气文章
      articleListHottest: [],
      //随机文章
      articleListRandom: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        title: null,
        status: null,
        startTime: null,
        endTime: null,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询文章管理列表 */
    getList() {
      listArticle(this.queryParams).then((response) => {
        this.articleList = response.rows;
        this.articleListLatest = response.rows;
        this.articleListHottest = response.rows;
        this.articleListRandom = response.rows;
        this.total = response.total;
        console.log(this.articleList);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>
